<template>
  <div>
    <Card dis-hover :bordered="false">
      <Row>
        <Col span="3">
        <List class="ivu-sidebar">
          <span v-for="item in sidebar" :key="item.id" @click="changeTab(item.address)">
            <ListItem :class="item.address === tabId ? 'ivu-active' : ''">{{ item.name }}</ListItem>
          </span>
        </List>
        </Col>
        <Col span="21">
        <component :is="tabId"></component>
        </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
    import marketingReport from './marketingReport.vue'// 营销报表
    import dialogFile from './dialogFile.vue'// 对话文件列表
    import consumption from './consumption.vue'// 消费列表
    import dialogs from './dialogs.vue'// 对话列表
    import channelConfiguration from './channelConfiguration.vue'// 渠道配置

    export default {
        name: 'feedBackForm',
        components: {
            marketingReport,
            dialogFile,
            consumption,
            dialogs,
            channelConfiguration
        },
        data () {
            return {
                tabId: 'marketingReport',
                sidebar: [
                    { id: 4, name: '营销报表', address: 'marketingReport' },
                    { id: 1, name: '对话列表', address: 'dialogs' },
                    { id: 2, name: '对话文件列表', address: 'dialogFile' },
                    { id: 3, name: '消费列表', address: 'consumption' },
                    { id: 5, name: '渠道配置', address: 'channelConfiguration' }
                ]
            };
        },
        methods: {
            changeTab (address) {
                this.tabId = address;
            }

        }

    };
</script>
<style>
  .ivu-sidebar span {
    cursor: pointer;
  }

  .ivu-active {
    font-weight: bold;
    color: #55b6ec;
  }
</style>
